<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .name {
            float: right;
        }

        .row {
            margin: 0;
        }

        .shop-img {
            text-align: left;
            padding-left: 30px;
        }

        .shop-img img {
            margin-right: 10px;
        }

        .panel-body {
            padding-bottom: 15px;
        }

        #tbodyId {
            font-size: 13px;
        }

        #myTable thead {
            font-size: 14px;
        }

        h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }

        h2 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        .form-control {
            border: none;
            box-shadow: none;
            background-color: transparent;
        }
        .table  thead  tr  th {
            vertical-align: bottom;
            border-bottom: 0px solid #ddd;}
        thead{ font-size: 14px;}
        td{font-size: 13px; border-bottom: 1px solid #ddd;}
    </style>
</head>
<body>
</tr>
<div id="page">
    <div class="panel panel-lzy">
        <div class="panel panel-f5">
            <div class="panel-body row">
                <div class="form-horizontal">
                    <h1>● 代理商信息</h1>
                    <ul class="tips-list-lzy">
                        <input type="hidden" id="_ctx" value="${basePath}"/>
                        <input type="hidden" id="id" name="id"/>
                        <div class="form-group">
                            <span class="control-label col-sm-2 col-xs-4  detail-span">姓名：</span>
                            <div class="col-sm-5 col-xs-4">
                                <span class="form-control" v-text="dataObj.name"></span>
                            </div>
                            <div class="col-sm-5 col-xs-4">
                                <span class="control-label col-sm-2 col-xs-4  detail-span">代理商状态：</span>
                                <span class="form-control" v-if="dataObj.state==0">正常</span>
                                <span class="form-control" v-else>禁用</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="control-label col-sm-2 col-xs-4  detail-span">手机号：</span>
                            <div class="col-sm-5 col-xs-4">
                                <span class="form-control" v-text="dataObj.phone"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="control-label col-sm-2 col-xs-4  detail-span">成为代理商时间：</span>
                            <div class="col-sm-5 col-xs-4">
                                <span class="form-control" v-text="dataObj.createDate"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="control-label col-sm-2 col-xs-4  detail-span">代理商编号：</span>
                            <div class="col-sm-5 col-xs-4">
                                <span class="form-control" v-text="dataObj.agentNumber"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="control-label col-sm-2 col-xs-4  detail-span">所在地：</span>
                            <div class="col-sm-5 col-xs-4">
                                <span class="form-control" v-text="dataObj.location"></span>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body panel-white">
        <#--<div class="panel panel-f5">-->
        <h2>● 拥有协议</h2>
        <div class="table-responsive">
            <table class="table table-hover" data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th  data-type="id" width="45%">序号</th>
                    <th  data-field="name" width="45%">协议名称</th>
                    <th  data-field="agentCommissio" width="5%">协议分佣</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in goodsList">
                    <td>{{item.agentProtocolDto.id}}</td>
                    <td>{{item.agentProtocolDto.name}}</td>
                    <td style="width: 100%">{{dataObj.agentCommission}}</td>
                </tr>
                </tbody>
             </table>
         </div>
     </div>
</div>


<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#page",
        data: {
            id: null,
            name: "",
            phone: "",
            createDate: "",
            agentNumber: "",
            location: "",
            goodsList:[],
            dataObj: {}
        },
        methods: {},
        created: function(){
            var _this = this;
            var cur = window.location.href.split("=");
            var id = cur[cur.length-1];
            $.ajax({
                url: '${basePath}/admin/agent/manage/queryAgency',
                type: 'GET',
                dataType: 'json',
                data: {
                    userId:id
                },
                success: function(data){
                    _this.dataObj = data.result;
                    _this.goodsList = data.result.agentProtocols;
                },
                error: function(){
                    console.log("error")
                }
            })
        }
    })


</script>
</body>
</html>